<template>
  <div>
    <el-form :inline="true" :model="queryForm" @keyup.enter.native="getDataList('reset')">
      <el-form-item label="优惠券名称">
        <el-input v-model="queryForm.name" maxlength="10" placeholder="优惠券名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="用户类型">
        <el-select v-model="queryForm.trait" placeholder="用户类型" clearable>
          <!-- <el-option label="全部" :value="-1"></el-option> -->
          <el-option label="普通券" :value="0"></el-option>
          <el-option label="新人券" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="优惠券类型">
        <el-select v-model="queryForm.mode" placeholder="优惠券类型" clearable>
          <el-option label="平台券" :value="0"></el-option>
          <el-option label="店铺券" :value="1"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="领取时间">
        <el-date-picker v-model="timeArr" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getDataList('reset')">查询</el-button>
        <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="openDetails()">新增优惠券</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
      <el-table-column align="center" prop="code" label="编号">
        <!-- <template slot-scope="scope">
          <span>{{(queryForm.page - 1) * queryForm.limit + scope.$index + 1}}</span>
        </template> -->
      </el-table-column>
      <el-table-column prop="name" header-align="center" align="center" label="优惠券名称">
      </el-table-column>
      <el-table-column prop="trait" header-align="center" align="center" label="用户类型">
        <template slot-scope="{row}">
          <el-tag v-if="row.trait===0">普通券</el-tag>
          <el-tag v-if="row.trait===1" type="success">新人券</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="mode" header-align="center" align="center" label="券类型">
        <template slot-scope="{row}">
          <el-tag v-if="row.mode===0">平台券</el-tag>
          <el-tag v-if="row.mode===1" type="success">店铺券</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column prop="face_value" header-align="center" align="center" label="优惠金额">
        <template slot-scope="{row}">
          {{row.face_value}}
          <!-- {{row.mode===1?'%':''}} -->
        </template>
      </el-table-column>
      <el-table-column prop="threshold" header-align="center" align="center" label="使用门槛">
        <template slot-scope="{row}">
          {{(!row.has_threshold)?'无':row.threshold}}
        </template>
      </el-table-column>
      <el-table-column prop="receive_limit" header-align="center" align="center" label="每人限领张数">
        <template slot-scope="{row}">
          {{row.receive_limit=='-1'?'不限':row.receive_limit}}
        </template>
      </el-table-column>
      <el-table-column prop="apply_time" header-align="center" align="center" label="剩余张数">
        <template slot-scope="{row}">
          {{(row.issue_number==-1)?'不限':(row.issue_number-row.receive_num)}}
        </template>
      </el-table-column>
      <el-table-column prop="receive_num" header-align="center" align="center" label="已领取张数">
        <template slot-scope="{row}">
          <span class="clickCls"></span>
          <el-button type="text" size="small" @click="seeReceiveList(row)">{{row.receive_num}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="apply_time" width="180px" header-align="center" align="center" label="可领取时间">
        <template slot-scope="{row}">
          {{row.start_time}} 至 {{row.end_time}}
        </template>
      </el-table-column>
      <el-table-column prop="active_state" header-align="center" align="center" label="领取状态">
        <template slot-scope="{row}">
          <el-tag v-if="row.active_state===3">正常</el-tag>
          <el-tag v-if="row.active_state===4" type="success">已完成</el-tag>
          <el-tag v-if="row.active_state===2" type="info">已发布</el-tag>
          <el-tag v-if="row.active_state===1" type="warning">待发布</el-tag>
          <el-tag v-if="row.active_state===0" type="danger">已终止</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="{row}">
          <el-button type="text" size="small" v-if="row.active_state===3||row.active_state===4||row.active_state===0||row.active_state===2" @click="openDetails(row,true)">查看详情</el-button>
          <el-button type="text" v-if="row.active_state===1" size="small" @click="openDetails(row)">编辑</el-button>
          <el-button type="text" size="small" v-if="row.active_state===2" @click="cancelReleased(row)">撤回</el-button>
          <el-button type="text" size="small" v-if="row.active_state===3" @click="stop(row)">终止</el-button>
          <el-button type="text" size="small" v-if="row.active_state===0" @click="released(row)">恢复</el-button>
          <el-button type="text" size="small" v-if="row.active_state===1" @click="reply(row)">发布</el-button>
          <el-button type="text" v-if="row.active_state===1" size="small" @click="delItem(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="queryForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="queryForm.limit" :total="total" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 新增、修改 -->
    <Details :show.sync="detailsShow" :disabled="disabled" :id="activeItem.id" @change="getDataList()"></Details>
  </div>
</template>

<script>
import couponApi from '@/api/couponApi.js'
import Details from './details.vue'
export default {
  components: {
    Details
  },
  data () {
    return {
      queryForm: {
        page: 1,
        limit: 10
      },
      dataList: [],
      total: 0,
      dataListLoading: false,
      timeArr: [],
      detailsShow: false,
      activeItem: {},
      disabled: false
    }
  },
  created () {
    this.getDataList()
  },
  methods: {
    getDataList (reset) {
      if (reset) this.queryForm.page = 1;
      if (this.timeArr && this.timeArr.length === 2) {
        this.queryForm.start_time = this.timeArr[0];
        this.queryForm.end_time = this.timeArr[1];
      } else {
        this.queryForm.start_time = null;
        this.queryForm.end_time = null
      }
      this.dataListLoading = true;
      couponApi.couponPage(this.queryForm).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list;
          this.total = res.data.page.totalCount;
        }
        this.dataListLoading = false;
      })
    },
    // 打开新增弹窗
    openDetails (item, bool) {
      this.detailsShow = true;
      this.activeItem = item || {};
      this.disabled = bool ? true : false;
    },
    // 删除
    delItem (item) {
      let ids = [item.id];
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        couponApi.couponDelete(ids).then(res => {
          if (res && res.data.code == 200) {
            this.$message.success('删除成功！')
            this.getDataList()
          }
        })
      }).catch(() => { })
    },
    // 撤回
    cancelReleased (item) {
      couponApi.couponCancelReleased(item.id).then(res => {
        if (res && res.data.code == 200) {
          this.$message.success('撤回成功！')
          this.getDataList()
        }
      })
    },
    // 终止
    stop (item) {
      couponApi.couponStop(item.id).then(res => {
        if (res && res.data.code == 200) {
          this.$message.success('终止成功！')
          this.getDataList()
        }
      })
    },
    // 发布
    reply (item) {
      couponApi.couponReleased(item.id).then(res => {
        if (res && res.data.code == 200) {
          this.$message.success('发布成功！')
          this.getDataList()
        }
      })
    },
    // 恢复
    released (item) {
      couponApi.couponCancelStop(item.id).then(res => {
        if (res && res.data.code == 200) {
          this.$message.success('恢复成功！')
          this.getDataList()
        }
      })
    },
    reset () {
      this.queryForm = {
        page: 1,
        limit: 10
      };
      this.timeArr = [];
      this.getDataList()
    },
    // 跳转至领取列表
    seeReceiveList (item) {
      this.$router.push({
        path: '/coupon-getList',
        query: {
          id: item.id,
          title: item.name
        }
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.queryForm.limit = val
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.queryForm.page = val
      this.getDataList()
    },
  }
}
</script>

<style lang="scss" scoped>
</style>